<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="layui/css/layui.css">
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			.news{
				width:1100px;
				height:650px;
				margin: 50px auto;
			}
			/* 当屏幕小于575px时使用以下样式 等于 xs */
			@media(max-width:575px) {
				.news,.color3{
					width: 100%;
				}
			}
			/* 等于 sm */
			@media(min-width:576px) and (max-width:767px) {
				.news,.color3{
					width: 100%;
				}
			}
			/* 等于 md */
			@media(min-width:768px) and (max-width:991px) {
				.news,.color3{
					width: 768px;
				}
			}
			/* 等于 lg */
			@media(min-width:992px){
				.news,.color3{
					width: 992px;
				}
			}
			.color1{
				height:650px;
				background-color: green;
			}
			.news_one{
				height:433px;
				background-color: black;
			}
			.newss_two{
				height:217px;
				background-color: red;
			}
			.color2{
				height: 650px;
				background-color: blue;	
			}
			.news_three{
				height: 338px;
				background-color: antiquewhite;
			}
			.news_four{
				height:312px;
				background-color: aqua;
			}
			.color3{
				width:1100px;
				height:650px;
				/* background-color: bisque; */
				margin: 50px auto;
			}
			.color4{
				width:350px;
				height: 650px;
				margin-right: 15px;
				background-color: blue;
			}
			.color5{
				width:350px;
				height: 223px;
				margin-right: 15px;
				background-color: blue;
			}
			.color3_one{
				height:213px;
				background-color: aquamarine;
				border:1px solid black;
			}
		</style>
	</head>
	<body>
		<div class="layui-row news">
			<div class="layui-col-xs12 layui-col-sm8 layui-col-md8 color1">
				<div class="news_one">1</div>
				<div class="newss_two">2</div>
			</div>
			<div class="layui-col-xs12 layui-col-sm4 layui-col-md4 color2">
				<div class="news_three">3</div>
				<div class="news_four">4</div>
			</div>
		</div>
		<div class="layui-row layui-col-space10 color3">
		  <div class="layui-col-md4 layui-col-xs12 layui-col-sm4 color4">
		    <div class="color3_one"></div>
		    <div class="color3_one"></div>
		    <div class="color3_one"></div>
		  </div>
		  <div class="layui-col-md4 layui-col-xs12 layui-col-sm4 color4">
		    <div class="color3_one"></div>
		    <div class="color3_one"></div>
		    <div class="color3_one"></div>
		  </div>
		  <div class="layui-col-md4 layui-col-xs12 layui-col-sm4 color4">
		    <div class="color3_one"></div>
		    <div class="color3_one"></div>
		    <div class="color3_one"></div>
		  </div>
		</div>
		<div class="layui-row news">
			<div class="layui-col-xs12 layui-col-sm8 layui-col-md8 color1">
				<div class="news_one">1</div>
				<div class="newss_two">2</div>
			</div>
			<div class="layui-col-xs12 layui-col-sm4 layui-col-md4 color2">
				<div class="news_three">3</div>
				<div class="news_four">4</div>
			</div>
		</div>
		<div class="layui-row layui-col-space10 color3">
		  <div class="layui-col-md4 layui-col-xs12 layui-col-sm4 color5">
		    <div class="color3_one"></div>
		  </div>
		  <div class="layui-col-md4 layui-col-xs12 layui-col-sm4 color5">
		    <div class="color3_one"></div>
		  </div>
		  <div class="layui-col-md4 layui-col-xs12 layui-col-sm4 color5">
		    <div class="color3_one"></div>
		  </div>
		</div>
	</body>
	<script src="layui/layui.js"></script>
</html>